<template>
  <div>
    <el-tabs
      v-model="data.pm.editableTabsValue"
      type="card"
      closable
      @tab-remove="removeTab"
      @tab-click="fun($event)"
    >
      <el-tab-pane
        v-for="item in data.pm.editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <!-- {{ item.content }} -->
        <!-- {{data.pm.tabIndex==1?<Nowei />:<Weixiu />}} -->
        <!-- <NoWei v-if="item.title=='未维修列表'"/>
        <WeiXiu v-else-if="item.title=='已维修列表'"/>
        <WorkerView v-else-if="item.title=='员工列表'" /> -->
        <!-- {{item.title=="已维修列表"?<Weixiu />:<Nowei />}} -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import NoWei from './NoWei.vue'
// import WeiXiu from './WeiXiu.vue'
// import WorkerView from './WorkerView.vue'
export default {
  // components:{NoWei,WeiXiu,WorkerView},
  computed: {
    ...mapState({
      data: (state) => state,
    }),
  },
  mounted() {
    console.log(this.data);
  },
  data() {
    return {};
  },
  methods: {
    fun(e) {
      console.log(e);
      if (e.label == "已维修列表") {
        this.$router.push("weixiu");
      } else if (e.label == "未维修列表") {
        this.$router.push("nowei");
      } else if (e.label == "员工列表") {
        this.$router.push("worker");
      } else if (e.label == "业主信息管理") {
        this.$router.push("chakan");
      } else if (e.label == "宠物信息管理") {
        this.$router.push("xiugai");
      } else if (e.label == "物业费管理") {
        this.$router.push("PersonFeeManagement");
      } else if (e.label == "水费管理") {
        this.$router.push("WaterChargeManagement");
      } else if (e.label == "电费管理") {
        this.$router.push("electric");
      } else if (e.label == "停车费管理") {
        this.$router.push("parking");
      } else if (e.label == "房屋列表") {
        this.$router.push("fangwu");
      }
    },
    removeTab(targetName) {
      let tabs = this.data.pm.editableTabs;
      let activeName = this.data.pm.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.data.pm.editableTabsValue = activeName;
      this.data.pm.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>

<style>
</style>